/* 
 * Fill layout
 */
.app-fill-height {
  height: 100% !important;
}

.app-fill-width {
  width: 100% !important;
}

.app-fill {
  width: 100% !important;
  height: 100% !important;
}

/* 
 * Flex layout
 */
.app-flex {
  display: flex !important;
}

.app-row {
  flex-direction: row !important;
}

.app-wrap {
  flex-wrap: wrap !important;
}

.app-nowrap {
  flex-wrap: nowrap !important;
}

.app-column {
  flex-direction: column !important;
}

.app-auto {
  flex: 1 1 auto !important;
}

.app-flex-1 {
  flex: 1 1 0 !important;
}

.app-grow {
  flex: 1 0 auto !important;
}

.app-shrink {
  flex: 0 1 auto !important;
}

.app-no-grow-shrink {
  flex: 0 0 auto !important;
}

.app-col-1 {
  flex: 0 0 8.3333333333333% !important;
  max-width: 8.3333333333333% !important;
}

.app-col-2 {
  flex: 0 0 16.6666666666667% !important;
  max-width: 16.6666666666667% !important;
}

.app-col-3 {
  flex: 0 0 25% !important;
  max-width: 25% !important;
}

.app-col-4 {
  flex: 0 0 33.333333333333333% !important;
  max-width: 33.333333333333333% !important;
}

.app-col-5 {
  flex: 0 0 41.666666666666667% !important;
  max-width: 41.666666666666667% !important;
}

.app-col-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

.app-col-7 {
  flex: 0 0 58.333333333333333% !important;
  max-width: 58.333333333333333% !important;
}

.app-col-8 {
  flex: 0 0 66.666666666666667% !important;
  max-width: 66.666666666666667% !important;
}

.app-col-9 {
  flex: 0 0 75% !important;
  max-width: 75% !important;
}

.app-col-10 {
  flex: 0 0 83.333333333333333% !important;
  max-width: 83.333333333333333% !important;
}

.app-col-11 {
  flex: 0 0 91.666666666666667% !important;
  max-width: 91.666666666666667% !important;
}

.app-col-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.app-hv-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.app-h-center {
  display: flex !important;
  justify-content: center !important;
}

.app-h-start {
  display: flex !important;
  justify-content: flex-start !important;
}

.app-h-end {
  display: flex !important;
  justify-content: flex-end !important;
}

.app-h-between {
  display: flex !important;
  justify-content: space-between !important;
}

.app-hv-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
}

.app-h-around {
  display: flex !important;
  justify-content: space-around !important;
}

.app-v-center {
  display: flex !important;
  align-items: center !important;
}

.app-around-center {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
}

.app-v-start {
  display: flex !important;
  align-items: flex-start !important;
}

.app-v-end {
  display: flex !important;
  align-items: flex-end !important;
}

.app-absolute {
  position: absolute !important;
}

.app-relative {
  position: relative !important;
}

.app-fixed {
  position: fixed !important;
}

.app-sticky {
  position: sticky !important;
  top: 0px !important;
}

.app-t-0 {
  top: 0px !important;
}

.app-t-1 {
  top: 4px !important;
}

.app-t-2 {
  top: 8px !important;
}

.app-t-3 {
  top: 12px !important;
}

.app-t-4 {
  top: 16px !important;
}

.app-t-8 {
  top: 32px !important;
}

.app-t-9 {
  top: 36px !important;
}

.app-t-10 {
  top: 40px !important;
}

.app-t-11 {
  top: 44px !important;
}

.app-t-12 {
  top: 48px !important;
}

.app-r-0 {
  right: 0px !important;
}

.app-r-1 {
  right: 4px !important;
}

.app-r-2 {
  right: 8px !important;
}

.app-r-3 {
  right: 12px !important;
}

.app-r-4 {
  right: 16px !important;
}

.app-r-5 {
  right: 20px !important;
}

.app-r-6 {
  right: 24px !important;
}

.app-r-7 {
  right: 28px !important;
}

.app-r-8 {
  right: 32px !important;
}

.app-r-9 {
  right: 36px !important;
}

.app-r-10 {
  right: 40px !important;
}

.app-b-0 {
  bottom: 0px !important;
}

.app-b-1 {
  bottom: 4px !important;
}

.app-b-2 {
  bottom: 8px !important;
}

.app-b-3 {
  bottom: 12px !important;
}

.app-b-4 {
  bottom: 16px !important;
}

.app-b-8 {
  bottom: 32px !important;
}

.app-b-11 {
  bottom: 44px !important;
}

.app-b-12 {
  bottom: 48px !important;
}

.app-l-0 {
  left: 0px !important ;
}

.app-l-1 {
  left: 4px !important;
}

.app-l-2 {
  left: 8px !important;
}

.app-l-3 {
  left: 12px !important;
}

.app-l-4 {
  left: 16px !important;
}

.app-l-5 {
  left: 20px !important;
}

.app-l-8 {
  left: 32px !important;
}

.app-scroll {
  pointer-events: all;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.app-scroll-x {
  pointer-events: all;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.app-scroll-y {
  pointer-events: all;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.app-hidden-xy {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.app-hidden-x {
  overflow-x: hidden !important;
}

.app-hidden-y {
  overflow-y: hidden !important;
}

.app-z-index-10 {
  z-index: 10 !important;
}

.app-z-index-20 {
  z-index: 20 !important;
}

.app-z-index-30 {
  z-index: 30 !important;
}

.app-z-index-40 {
  z-index: 40 !important;
}

.app-z-index-50 {
  z-index: 50 !important;
}

.app-z-index-60 {
  z-index: 60 !important;
}

.app-z-index-70 {
  z-index: 70 !important;
}

.app-z-index-80 {
  z-index: 80 !important;
}

.app-z-index-90 {
  z-index: 90 !important;
}

.app-z-index-100 {
  z-index: 100 !important;
}

.app-inline-block {
  display: inline-block !important;
}

/* Width by percent */
.app-width-10p {
  width: 10% !important;
}

.app-width-15p {
  width: 15% !important;
}

.app-width-20p {
  width: 20% !important;
}

.app-width-25p {
  width: 25% !important;
}

.app-width-30p {
  width: 30% !important;
}

.app-width-35p {
  width: 35% !important;
}

.app-width-45p {
  width: 45% !important;
}

.app-width-40p {
  width: 40% !important;
}

.app-width-50p {
  width: 50% !important;
}
.app-width-55p {
  width: 55% !important;
}

.app-width-60p {
  width: 60% !important;
}

.app-width-65p {
  width: 65% !important;
}

.app-width-70p {
  width: 70% !important;
}

.app-width-75p {
  width: 75% !important;
}

.app-width-80p {
  width: 80% !important;
}

.app-width-85p {
  width: 85% !important;
}

.app-width-90p {
  width: 90% !important;
}

.app-width-100p {
  width: 100% !important;
}

.app-width-70vw {
  width: 70vw !important;
}

.app-width-100vw {
  width: 100vw !important;
}

.app-height-30vh {
  height: 30vh !important;
}

.app-height-40vh {
  height: 40vh !important;
}

.app-height-50vh {
  height: 50vh !important;
}

.app-height-70vh {
  height: 70vh !important;
}

.app-height-75vh {
  height: 75vh !important;
}

.app-height-100vh {
  height: 100vh !important;
}

/* Min height by window height percent */
.app-min-h-101vh {
  min-height: 101vh !important;
}

.app-min-h-100vh {
  min-height: 100vh !important;
}

.app-min-h-90vh {
  min-height: 90vh !important;
}

.app-min-h-80vh {
  min-height: 80vh !important;
}

.app-min-h-70vh {
  min-height: 70vh !important;
}

.app-min-h-60vh {
  min-height: 60vh !important;
}

.app-min-h-50vh {
  min-height: 50vh !important;
}

/* Min height by value */
.app-min-h-100px {
  min-height: 100px !important;
}

.app-min-h-150px {
  min-height: 150px !important;
}

.app-min-h-200px {
  min-height: 200px !important;
}

.app-min-h-250px {
  min-height: 250px !important;
}

.app-min-h-300px {
  min-height: 300px !important;
}

.app-min-h-400px {
  min-height: 400px !important;
}

.app-min-h-500px {
  min-height: 500px !important;
}

/* Max width by value */
.app-max-w-80px {
  max-width: 80px !important;
}

.app-max-w-100px {
  max-width: 100px !important;
}

.app-max-w-150px {
  max-width: 150px !important;
}

.app-max-w-160px {
  max-width: 160px !important;
}

.app-max-w-200px {
  max-width: 200px !important;
}

.app-max-w-220px {
  max-width: 220px !important;
}

.app-max-w-230px {
  max-width: 230px !important;
}

.app-max-w-250px {
  max-width: 250px !important;
}

.app-max-w-300px {
  max-width: 300px !important;
}

/* Center */
.app-center {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.app-xy-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.app-x-center {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.app-y-center {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Width and Height by value */
.app-wh-8px {
  width: 8px !important;
  height: 8px !important;
}
.app-wh-10px {
  width: 10px !important;
  height: 10px !important;
}

.app-wh-12px {
  width: 12px !important;
  height: 12px !important;
}

.app-wh-16px {
  width: 16px !important;
  height: 16px !important;
}

.app-wh-18px {
  width: 18px !important;
  height: 18px !important;
}

.app-wh-20px {
  width: 20px !important;
  height: 20px !important;
}

.app-wh-24px {
  width: 24px !important;
  height: 24px !important;
}

.app-wh-28px {
  width: 28px !important;
  height: 28px !important;
}

.app-wh-32px {
  width: 32px !important;
  height: 32px !important;
}

.app-wh-36px {
  width: 36px !important;
  height: 36px !important;
}

.app-wh-40px {
  width: 40px !important;
  height: 40px !important;
}

.app-wh-48px {
  width: 48px !important;
  height: 48px !important;
}

.app-wh-56px {
  width: 56px !important;
  height: 56px !important;
}

.app-wh-64px {
  width: 64px !important;
  height: 64px !important;
}

.app-wh-72px {
  width: 72px !important;
  height: 72px !important;
}

.app-wh-100px {
  width: 100px !important;
  height: 100px !important;
}

.app-wh-150px {
  width: 150px !important;
  height: 150px !important;
}

/* Width by value */
.app-w-16px {
  width: 16px !important;
}

.app-w-24px {
  width: 24px !important;
}

.app-w-32px {
  width: 32px !important;
}

.app-w-36px {
  width: 36px !important;
}

.app-w-48px {
  width: 48px !important;
}

.app-w-64px {
  width: 64px !important;
}

.app-w-72px {
  width: 72px !important;
}

.app-w-100px {
  width: 100px !important;
}

.app-w-128px {
  width: 128px !important;
}

.app-w-150px {
  width: 150px !important;
}

.app-w-200px {
  width: 200px !important;
}

.app-w-300px {
  width: 300px !important;
}

.app-w-800px {
  width: 800px !important;
}
/* Height by value */
.app-h-1px {
  height: 1px !important;
}

.app-h-2px {
  height: 2px !important;
}

.app-h-3px {
  height: 3px !important;
}

.app-h-16px {
  height: 16px !important;
}

.app-h-24px {
  height: 24px !important;
}

.app-h-32px {
  height: 32px !important;
}

.app-h-36px {
  height: 36px !important;
}

.app-h-40px {
  height: 40px !important;
}

.app-h-48px {
  height: 48px !important;
}

.app-h-56px {
  height: 56px !important;
}

.app-h-64px {
  height: 64px !important;
}

.app-h-128px {
  height: 128px !important;
}

/* Min width by value */
.app-min-w-48px {
  min-width: 48px !important;
}

.app-min-w-64px {
  min-width: 64px !important;
}

.app-min-w-100px {
  min-width: 100px !important;
}

.app-min-w-150px {
  min-width: 150px !important;
}

.app-min-w-120px {
  min-width: 120px !important;
}

/* Min height by value */
.app-min-h-48px {
  min-height: 48px !important;
}

.app-min-h-64px {
  min-height: 64px !important;
}

.app-min-h-100px {
  min-height: 100px !important;
}

.app-height-100wh {
  height: 100vh !important;
  width: 100vw !important;
}
